﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="Student_PhotoUpload" Codebehind="~/Staff/PhotoUpload.aspx.cs" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Upload Photo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="../App_Themes/main/styles/demos.css" type="text/css" />
<link rel="stylesheet" href="../App_Themes/main/styles/main.css" type="text/css" />
<link rel="stylesheet" href="../App_Themes/main/styles/installation.css" type="text/css" />
<link rel="stylesheet" href="../App_Themes/main/styles/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="../App_Themes/main/styles/lytebox.css" type="text/css" />



    <script type="text/javascript">

        jQuery(document).ready(function() {

            jQuery('#imgCrop').Jcrop({

                onSelect: storeCoords

            });

        });
        
        function storeCoords(c) {

            jQuery('#X').val(c.x);

            jQuery('#Y').val(c.y);

            jQuery('#W').val(c.w);

            jQuery('#H').val(c.h);

        };

        function CloseLyteBox()
         {   
            myLytebox.end();
        }
        

 

    </script>
</head>
<body>
    <form id="form1" runat="server">      

    <div style="vertical-align:top; height:470px; overflow:hidden;">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <table cellpadding="5" cellspacing="0" width="100%">
            <tr>
                <td align="center" colspan="3">
                    <asp:Panel ID="pnlUpload" runat="server">
                        <table cellpadding="3" cellspacing="0" width="100%">
                            <tr>
                                <td class="student_blue" align="left">
                                    <asp:Literal ID="ML_0003" runat="server" meta:resourcekey="ML_0003">Choose a Photo to Upload</asp:Literal>
                                </td>
                            </tr>
                           
                            <tr>
                                <td align="center">
                                    <asp:FileUpload ID="UploadFile" runat="server" size="20" />
                                    
                                    <asp:Button ID="btnUploadPhoto" runat="server" Text="Upload"
                                        OnClick="btnUploadPhoto_Click" meta:resourcekey="btnUploadPhoto"/>
                                </td>
                            </tr>
                            <tr>
                                <td align="center"><asp:Label ID="lblMsg" ForeColor="Red" runat="server"></asp:Label></td>
                            </tr>
                        </table>
                        
                        <div class="bevel_horline" ></div>
                    </asp:Panel>
                </td>
            </tr>
            
            <asp:UpdatePanel ID="up1" runat="server">
                <ContentTemplate>
                    <tr>
                        <td style="width:60%; height:350px;" valign="top">
                            <asp:Panel ID="pnlCrop" runat="server" Visible="false">
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td class="student_blue" align="left">
                                            <asp:Literal ID="ML_0009" runat="server" meta:resourcekey="ML_0009">Crop Photo</asp:Literal>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            
                                            <asp:Image ID="imgCrop" runat="server" />
                                            <br />
                                            <asp:HiddenField ID="X" runat="server" />
                                            <asp:HiddenField ID="Y" runat="server" />
                                            <asp:HiddenField ID="W" runat="server" />
                                            <asp:HiddenField ID="H" runat="server" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" meta:resourcekey="btnCrop"/>
                                            <asp:Button ID="btnUseOriginal" runat="server" Text="Use Original" OnClick="btnUseOriginal_Click" meta:resourcekey="btnUseOriginal"/>
                                        </td>
                                    </tr>
                                </table>
                            </asp:Panel>
                        </td>
                        <td class="bevel_verline"></td>
                        <td style="width:39%;" valign="top">
                            <asp:Panel ID="pnlCropped" runat="server" Visible="false">
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td class="student_blue" align="left">
                                            <asp:Literal ID="ML_0018" runat="server" meta:resourcekey="ML_0018">Apply Changes</asp:Literal>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 2px;" align="center" valign="top">
                                           
                                            <asp:Image ID="imgCropped" runat="server" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:Button ID="btnApplyChanges" runat="server" Text="Apply Changes" OnClick="btnApplyChanges_Click" meta:resourcekey="btnApplyChanges"/>
                                        </td>
                                    </tr>
                                </table>
                            </asp:Panel>
                        </td>
                    </tr>
                </ContentTemplate>
            </asp:UpdatePanel>
        </table>
    </div>
    </form>
</body>
</html>
